
<template>
  <div class="upload">
    <el-card class="box-card">
      <el-upload
        class="upload-demo"
        drag
        :action="uploadApi"
        :on-success="handleAvatarSuccess"
        multiple
        :before-upload="beforeAvatarUpload"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2MB</div>
      </el-upload>

      <el-input placeholder="路径路径在此显示...." v-model="nowUrl" class="input-with-select">
      </el-input>
      <p style="font-size:16px;text-align:center">点击图片即可复制图片路径</p>
      <img class="tag-read" 
      :data-clipboard-text = copytext
      v-for="item in imgUrl" :key ="item.url" :src="item.url" v-show ="item.url" @click="copyUrl(item.url)" />
    </el-card>
  </div>
</template>

<script>
import Clipboard from 'clipboard';
export default {
  name: 'imgup',
  data() {
    return {
      domain: 'http://www.cdn.adingxiong.com',
      nowUrl : '',
      uploadApi:'http://114.55.164.189:8002/dev/file/upload',
      imgUrl:[],
      copytext:'',
    }
  },
  created (){
    //this.getImageList()
  },
  methods: {
    handleAvatarSuccess(response) {
      let url =response.data
      this.nowUrl = url 
      this.imgUrl.push({url:url});
    },
    beforeAvatarUpload(file){
      var flag = true
      const isJPG = file.type === 'image/jpg' || file.type === "image/jpeg";
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
        flag =false
      }
      if (!isLt2M) {
        flag =false
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return flag
    },
    copyUrl(val) {
        var clipboard = new Clipboard('.tag-read')
        this.copytext = val;
        clipboard.on('success', e => {
            this.$message.success("复制成功",e)
            clipboard.destroy()
        })
        clipboard.on('error', e => {
            this.$message.error("该浏览器不支持复制",e)
            // 释放内存
            clipboard.destroy()
        })
    }
  }
}
</script>

<style scoped lang ="scss">
    
    .box-card {
       
       
        .upload-demo {
          text-align: center;
        }

        .el-input {
          margin: 10px 0 
        }
        img {
          width:300px;
          height: 300px;
          border-radius: 10px;
          margin-right: 20px;
          box-shadow: 0 0 10px rgb(69,125,55);
          cursor: pointer;
        }
    }
</style>


